<template>
  <div>
    <div class="flex flex-a-c headerBox" @click="gotoThat">
      <div class="title">效率分析</div>
      <a-icon type="right" />
    </div>
    <div class=" lightBox" style="height:380px">
      <a-card
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tabChange="key => onTabChange(key, 'noTitleKey')"
      >
        <lineChart
          v-if="chartData"
          :chart-data="chartData"
          :height="'320px'"
          :str="str"
        ></lineChart>

        <a-empty style="margin-top:100px" v-else />
      </a-card>
    </div>
  </div>
</template>

<script>
import lineChart from "./lineChart.vue";
export default {
  name: "index",
  components: {
    lineChart
  },
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tabListNoTitle: [
        { key: "1", tab: "开机率" },
        { key: "2", tab: "运行时间" },
        { key: "3", tab: "故障时间" }
      ],
      noTitleKey: "1",
      // chartData: {
      //   expectedData: [200, 192, 120, 144, 160, 130, 140],
      //   expectedData2: [180, 160, 151, 106, 145, 150, 130],
      //   expectedData3: [18, 16, 15, 10, 14, 15, 10],
      //   expectedData4: [109, 100, 110, 160, 150, 100, 108],
      //   expectedData5: [145, 167, 18, 190, 125, 178, 140],
      //   date: ["2020-01-02", "2020-01-03", "2020-01-04", "2020-01-05", "2020-01-06", "2020-01-07"],
      //   name1: "产线A", name2: "产线B", name3: "产线C", name4: "产线D", name5: "产线E"
      // },
      str: "%"
    };
  },
  watch: {
    chartData(val) {
      console.log(val);
      return val;
    }
  },
  methods: {
    gotoThat() {
      this.$store.commit("board/HeadNavType", 2);
      localStorage.setItem("navType", 2);
      this.$router.push("/statistics");
    },
    onTabChange(key, type) {
      this[type] = key;
      if (key == 1) {
        this.str = "%";
      } else {
        this.str = "小时";
      }
      this.$emit("onTabChange", key);
    }
  }
};
</script>

<style scoped lang="less">
.headerBox {
  margin: 20px 0 10px 0;
  .title {
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 4px 0 0;
  }
}
.lightBox {
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}
::v-deep .ant-card {
  background-color: rgba(0, 0, 0, 0) !important;
}
::v-deep .ant-card-bordered {
  border: 0 !important;
}
::v-deep .ant-card-body {
  padding: 5px 16px !important;
}
</style>
